<template>

    <div class="user_container">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>用户</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card class="user_list_card">

            <!-- title -->
            <el-row class="title">
                <el-col>用户列表</el-col>
            </el-row>

            <!-- 主体内容 -->
            <div class="content">

                <el-row class="search_box" :gutter="20">
                    <el-col :span='6'>
                        <el-input placeholder="请输入内容（昵称、手机号）" v-model="name" size="medium"></el-input>
                    </el-col>

                    <el-col :span="2">
                        <el-button type="primary" style="padding: 9px 25px;" size="medium" plain @click="searchList()">筛选</el-button>
                    </el-col>
                </el-row>


                <!-- 表格 -->
                <el-table class="user_table" :data="tableData.slice((page-1)*limit,page*limit)" style="width: 100%" border>
                    <el-table-column label="用户头像">
                        <div class="head_logo_box" slot-scope="scope">
                            <img :src="scope.row.avatar_url" class="head_logo"
                                 alt="">
                        </div>
                    </el-table-column>

                    <el-table-column prop="nickname" label="用户昵称">
                    </el-table-column>

                    <el-table-column prop="mobile" label="手机号">
                    </el-table-column>

                    <el-table-column prop="create_time" label="创建时间">
                    </el-table-column>

                    <el-table-column prop="total_pay" label="购买金额">
                    </el-table-column>

                    <el-table-column prop="order_success_count" label="购买次数">
                    </el-table-column>

                </el-table>
            </div>

            <!-- 分页器 -->
            <el-pagination background @current-change="handleCurrentChange" :current-page="page" :page-size="limit"
                           layout="total, prev, pager, next" :total="count">
            </el-pagination>

        </el-card>
    </div>

</template>

<script src='../../../static/js/user/user_list.js'></script>

<style scoped>
    @import "../../../static/css/user/user_list.css";
</style>


